import { Divider } from "antd"
import { formatMessage } from 'umi/locale'

const WorkOrderBaseInfo = props => {
  const style1 = {border:"1px solid #ccc",padding:16,borderRadius:6,width:"30%"}
  const style2 = {display:"flex",alignItems:"center"}
  const style3 = {display:"flex",alignItems:"center",justifyContent:"center",background:"rgba(62,91,255,0.10)",borderRadius:"50%",width:40,height:40,marginRight:10}
  const style4 = {width:16}
  const style5 = {color:"#3e5bff"}
  const style6 = {marginLeft:"auto",fontWeight:"bold",fontSize:"28px"}
  const style7 = {display:"flex",alignItems:"center",justifyContent:'space-between',fontWeight:"700",lineHeight:"24px",paddingLeft:50}
  const { detail } = props;
  return (
      <div style={{display:"flex",alignItems:"stretch",justifyContent:"space-between"}}>
        <div style={style1}>
          <div style={style2}>
            <div style={style3}><img src="../../../newUI/orderNum.png" style={style4} /></div>
            <div style={style5}>{formatMessage({id: 'pages.workOrder.statistics.total'})}</div>
            <div style={style6}>{detail.total}</div>
          </div>
          <Divider style={{margin:"14px 0"}} />
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.pending'})}</div>
            <div>{detail.unprocessed}</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.processing'})}</div>
            <div>{detail.processing}</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.closed'})}</div>
            <div>{detail.closed}</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.avgDuration'})}</div>
            <div>{detail.averageSolution}h</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.totalDuration'})}</div>
            <div>{detail.totalSolution}h</div>
          </div>
        </div>

        <div style={style1}>
          <div style={style2}>
            <div style={style3}><img src="../../../newUI/orderNum.png" style={style4} /></div>
            <div style={style5}>{formatMessage({id: 'pages.workOrder.statistics.service'})}</div>
            <div style={style6}>{detail.totalYiFang}</div>
          </div>
          <Divider style={{margin:"14px 0"}} />
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.pending'})}</div>
            <div>{detail.unprocessedYiFang}</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.processing'})}</div>
            <div>{detail.processingYiFang}</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.closed'})}</div>
            <div>{detail.closedYiFang}</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.avgDuration'})}</div>
            <div>{detail.averageSolutionYiFang}h</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.totalDuration'})}</div>
            <div>{detail.totalSolutionYiFang}h</div>
          </div>
        </div>

        <div style={style1}>
          <div style={style2}>
            <div style={style3}><img src="../../../newUI/orderNum.png" style={style4} /></div>
            <div style={style5}>{formatMessage({id: 'pages.workOrder.statistics.company'})}</div>
            <div style={style6}>{detail.totalJiaFang}</div>
          </div>
          <Divider style={{margin:"14px 0"}} />
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.pending'})}</div>
            <div>{detail.unprocessedJiaFang}</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.processing'})}</div>
            <div>{detail.processingJiaFang}</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.closed'})}</div>
            <div>{detail.closedJiaFang}</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.totalDuration'})}</div>
            <div>{detail.totalSolutionJiaFang}h</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.totalDuration'})}</div>
            <div>{detail.totalSolutionJiaFang}h</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.avgDuration'})}</div>
            <div>{detail.averageSolutionJiaFang}h</div>
          </div>
          <div style={style7}>
            <div>{formatMessage({id: 'pages.workOrder.statistics.totalDuration'})}</div>
            <div>{detail.totalSolutionJiaFang}h</div>
          </div>
        </div>
      </div>
  )
}

export default WorkOrderBaseInfo